/**
 * 预先定义好的Text的组件，数字即代表字号
 */
import React from 'react';
import {
  Text,
} from 'react-native';

const H36 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 36,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);


const H30 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 30,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);


const H24 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 24,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);



const H20 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 20,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);

const H18 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 18,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);


const H16 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 16,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);

const H14 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 14,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);

const H12 = ({
  color = '#000',
  center = false,
  children,
}) => (
  <Text
    style={[{
      fontSize: 14,
      color,
      paddingHorizontal: 8,
      textAlign: 'center',
    },
      center && { alignSelf: 'center' },
    ]}>
    {children}
  </Text>
);

export default {
  H12,
  H14,
  H16,
  H18,
  H20,
  H24,
  H30,
  H36,
};
